const htmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const path = require("path");
const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");

module.exports = {
  target: "electron-renderer",
  entry: "./src/index.tsx",
  output: {
    path: path.join(__dirname, "../dist/frontend"),
    filename: "bundle.js",
  },
  plugins: [
    new htmlWebpackPlugin({
      template: "./src/index.html",
    }),
    //DefinePlugin插件可以定义常量，方便代码中使用
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || "production"),
    }),
    // tip 使用DllReferencePlugin和AddAssetHtmlPlugin插件来添加dll文件
    //DllReferencePlugin插件帮助webpack分析需要引入哪些库文件，配合DllPlugin插件使用
    new webpack.DllReferencePlugin({
      manifest: require(path.resolve(__dirname, "./dll/react.manifest.json")),
    }),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, "./dll/react.dll.js"),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(svg|woff2)/,
        use: ["file-loader"],
      },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.(ts|js)x?$/,
        loader: "babel-loader",
        include: /src/,
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".json"],
  },
};
